<template>
  <Dialog v-model="visible" title="打印简历" width="90%" top="30px">
    <div id="printRef" ref="printRef" class="resume-print">
      <h2 style="text-align: center">简历申请表</h2>
      <div style="text-align: center; margin: 0 auto">
        <h5 style="text-align: center">
          <span style="display: inline-block">应聘岗位: {{ form.post }}</span>
          <span style="display: inline-block; margin-left: 50px">日期: {{ formatDate(form.date) }}</span>
        </h5>
        <table class="table">
          <tr>
            <th style="width: 100px">姓名</th>
            <td style="width: 100px">{{ form.name }}</td>
            <th style="width: 100px">性别</th>
            <td style="width: 100px">{{ form.sex }}</td>
            <th style="width: 100px">出生年月</th>
            <td style="width: 100px">{{ formatDate(form.dateOfBirth) }}</td>
          </tr>
          <tr>
            <th style="width: 100px">民族</th>
            <td style="width: 100px">{{ form.nation }}</td>
            <th style="width: 100px">身高</th>
            <td style="width: 100px">{{ form.height }}</td>
            <th style="width: 100px">应聘渠道</th>
            <td style="width: 100px">{{ form.channels }}</td>
          </tr>
          <tr>
            <th style="width: 100px">学历</th>
            <td style="width: 100px">{{ form.education }}</td>
            <th style="width: 100px">毕业院校</th>
            <td style="width: 200px">{{ form.graduateInstitutions }}</td>
            <th style="width: 100px">专业</th>
            <td style="width: 100px">{{ form.major }}</td>
          </tr>
          <tr>
            <th>政治面貌</th>
            <td>{{ form.politicalOutlook }}</td>
            <th style="width: 100px">健康状况</th>
            <td style="width: 100px">{{ form.healthCondition }}</td>
            <th style="width: 100px">婚姻状况</th>
            <td style="width: 100px">{{ form.marriageState }}</td>
          </tr>
          <tr>
            <th>手机</th>
            <td>{{ form.urgentPhone }}</td>
            <th>现住地址</th>
            <td colspan="3">{{ form.currentAddress }}</td>
          </tr>
          <tr>
            <th style="width: 150px">身份证号码</th>
            <td style="width: 150px">{{ form.cardId }}</td>
            <th>户籍地址</th>
            <td colspan="3">{{ form.address }}</td>
          </tr>
          <tr>
            <th>紧急联系人</th>
            <td>{{ form.emergencyContact }}</td>
            <th>联系人电话</th>
            <td>{{ form.emergencyContactPhone }}</td>
            <th>关系</th>
            <td>{{ form.relation }}</td>
          </tr>

          <tr>
            <th>学习经历</th>
            <td style="padding: 0" colspan="5">
              <table width="100%" class="inTable">
                <thead>
                  <tr>
                    <th>起止时间</th>
                    <th>毕业学校和专业</th>
                    <th>获得荣誉/担任职务</th>
                    <th>是否毕业</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in studyList" :key="'study' + index">
                    <td>
                      {{ formatDate(item.startDate) }}&nbsp;至&nbsp;{{
                        item.endDate ? formatDate(item.endDate) : '至今'
                      }}
                    </td>
                    <td>{{ item.school }}</td>
                    <td>{{ item.post }}</td>
                    <td>{{ item.graduation }}</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <tr>
            <th>工作经历</th>
            <td style="padding: 0" colspan="5">
              <table width="100%" class="inTable">
                <thead>
                  <tr>
                    <th>起止时间</th>
                    <th>工作单位、担任职务</th>
                    <th>证明人</th>
                    <th>证明人电话</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in workList" :key="'work' + index">
                    <td>
                      {{ formatDate(item.startDate) }}&nbsp;至&nbsp;{{
                        item.endDate ? formatDate(item.endDate) : '至今'
                      }}
                    </td>
                    <td>{{ item.company }} - {{ item.post }}</td>
                    <td>{{ item.certifier }}</td>
                    <td>{{ item.phone }}</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>

          <tr>
            <th>家庭成员</th>
            <td style="padding: 0" colspan="5">
              <table width="100%" class="inTable">
                <thead>
                  <tr>
                    <th>姓名</th>
                    <th>关系</th>
                    <th>工作单位</th>
                    <th>联系电话</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in familyList" :key="'family' + index">
                    <td>{{ item.name }}</td>
                    <td>{{ item.relation }}</td>
                    <td>{{ item.company }}</td>
                    <td>{{ item.phone }}</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>

          <tr>
            <th colspan="2">离开原单位主要原因</th>
            <td colspan="4">{{ form.leaveCause }}</td>
          </tr>
          <tr>
            <th>上一份薪资</th>
            <td>{{ form.lastSalary }}</td>
            <th>期望薪资</th>
            <td>{{ form.expectedSalary }}</td>
            <th>可到岗时间</th>
            <td>{{ form.arrivalTime }}</td>
          </tr>

          <tr>
            <td colspan="6">
              您现在的健康状况如何？有无得过什么大病或传染病
              <el-checkbox :checked="healthStatus === '良好/无'">良好/无</el-checkbox>
            </td>
          </tr>

          <tr>
            <td colspan="6">
              您最看重(划)
              <el-checkbox :checked="focusPoints?.includes('薪资')">薪资</el-checkbox>
              <el-checkbox :checked="focusPoints?.includes('职务')">职务</el-checkbox>
              <el-checkbox :checked="focusPoints?.includes('个人发展')">个人发展</el-checkbox>
              <el-checkbox :checked="focusPoints?.includes('办公环境')">办公环境</el-checkbox>
              <el-checkbox :checked="focusPoints?.includes('工作氛围')">工作氛围</el-checkbox>
              <el-checkbox :checked="focusPoints?.includes('福利')">福利</el-checkbox>
              其他：
            </td>
          </tr>

          <tr>
            <td colspan="6" style="text-align: left">
              <h6>
                本人保证以上填写内容的真实性，在此授权义乌市拿云电子商务有限公司及其合法授权人对本人提供的履历信息进行核实，
                并在有必要时向有关机构和个人进行询问，免除该公司及授权人在信息收集过程中可能产生的法律责任!
                入职后如发现以上填写内容与实际不符，本人愿意接受解职处理！
              </h6>

              <div style="display: grid; grid-template-columns: auto 1fr">
                <h5><span>本人确认签名：</span></h5>
                <h5 style="text-align: center">日期：</h5>
              </div>
            </td>
          </tr>

          <tr>
            <td colspan="6" style="text-align: left">
              <div style="display: grid; grid-template-columns: auto 1fr">
                <h5><span>初试官签名：</span></h5>
                <h5 style="text-align: center">是否录用求职者：</h5>
              </div>

              <div style="display: grid; grid-template-columns: auto 1fr">
                <h5><span>复试官签名：</span></h5>
                <h5 style="text-align: center">不录用原因：</h5>
              </div>
            </td>
          </tr>
          <tr>
            <th>试用期时长</th>
            <td></td>
            <th>试用期薪资</th>
            <td></td>
            <th>转正要求</th>
            <td></td>
          </tr>
          <tr>
            <th>转正薪资</th>
            <td></td>
            <th colspan="2">转正绩效考核标准</th>
            <td colspan="2"></td>
          </tr>
        </table>
      </div>
      <div ref="bottomElRef">
        <div style="margin-top: 30px; text-align: right">
          <div style="display: inline-block; width: 100%">
            <div style="float: left; width: 33.33%; height: 28px; line-height: 28px"></div>
            <div style="float: left; width: 33.33%; height: 28px; line-height: 28px"></div>
            <div style="float: left; width: 33.33%">邀约人：{{ inviterName }}</div>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="printEvent">打 印</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { RecruitInterviewApi, type RecruitInterview } from '@/api/business/hr/recruit/interview'
import { VXETable } from 'vxe-table'
import { formatToDate } from '@/utils/dateUtil'

const visible = ref(false)
const printRef = ref<HTMLDivElement>()

const form = reactive<Partial<RecruitInterview>>({})
const studyList = ref<any[]>([])
const workList = ref<any[]>([])
const familyList = ref<any[]>([])
const inviterName = ref('')
const healthStatus = ref('')
const focusPoints = ref<string[]>([])

const formatDate = (dateStr: string | number | undefined | null) => {
  if (!dateStr) return ''
  return formatToDate(Number(dateStr))
}

const parseList = (raw?: string | null) => {
  if (!raw) {
    return []
  }
  try {
    const parsed = JSON.parse(raw)
    return Array.isArray(parsed) ? parsed : []
  } catch {
    return []
  }
}

const open = async (row: RecruitInterview) => {
  visible.value = true
  if (!row.id) return

  try {
    const data = await RecruitInterviewApi.getRecruitInterview(row.id)
    Object.assign(form, data)

    // 解析列表数据
    studyList.value = parseList(data.studyList)
    workList.value = parseList(data.workList)
    familyList.value = parseList(data.familyList)

    // 设置邀约人姓名
    inviterName.value = data.inviter || ''

    // 解析健康状况和关注点（如果存储在数据中）
    // 这些字段可能需要根据实际数据结构进行调整
  } catch (error) {
    console.error('获取面试信息失败', error)
  }
}

const printEvent = () => {
  const divEl = document.getElementById('printRef')
  if (!divEl) return

  VXETable.print({
    sheetName: '简历申请表',
    content: divEl?.outerHTML,
    style: printStyle
  })
}

const printStyle = `
  table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
  }

  th, td {
    border: 1px solid black;
    padding: 4px;
    text-align: left;
  }

  .inTable table, .inTable th, .inTable td {
    border: none;
  }

  .inTable th, .inTable td {
    border-bottom: 1px solid #ccc;
  }

  h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }

  h5 {
    font-size: 14px;
    margin: 10px 0;
  }

  h6 {
    font-size: 12px;
    margin: 10px 0;
  }
`

defineExpose({ open })
</script>

<style scoped>
.resume-print {
  padding: 20px;
}

.resume-print table {
  border-collapse: collapse;
  width: 100%;
}

.resume-print th,
.resume-print td {
  border: 1px solid black;
  padding: 4px;
  text-align: left;
}

.resume-print .inTable table,
.resume-print .inTable th,
.resume-print .inTable td {
  border: none;
}

.resume-print .inTable th,
.resume-print .inTable td {
  border-bottom: 1px solid #ccc;
}
</style>
